<template>
  <div style="padding: 32px 0; background: #fafafa; min-height: 100vh; max-width: 1200px; margin: 0 auto;">
    <el-card>
      <div style="font-weight: bold; font-size: 16px; margin-bottom: 12px;">订单号：1366113806553485</div>
      <!-- 订单状态进度条 -->
      <el-row :gutter="20" style="margin-bottom: 24px;">
        <el-col :span="8">
          <div style="text-align: center;">
            <el-icon color="#e43"><i class="el-icon-check"></i></el-icon>
            <div>待付款</div>
          </div>
        </el-col>
        <el-col :span="8">
          <div style="text-align: center;">
            <el-icon color="#e43"><i class="el-icon-check"></i></el-icon>
            <div>待发货</div>
          </div>
        </el-col>
        <el-col :span="8">
          <div style="text-align: center;">
            <el-icon color="#e43"><i class="el-icon-check"></i></el-icon>
            <div>已完成</div>
          </div>
        </el-col>
      </el-row>
      <!-- 订单基础信息 -->
      <el-card style="margin-bottom: 18px;">
        <div style="font-weight: bold; margin-bottom: 8px;">订单基础信息</div>
        <el-row :gutter="16">
          <el-col :span="8">订单号：1376113806548768</el-col>
          <el-col :span="8">下单时间：2023-02-28 12:08:17</el-col>
          <el-col :span="8">订单类型：小程序</el-col>
        </el-row>
        <el-row :gutter="16" style="margin-top: 8px;">
          <el-col :span="8">订单状态：已送达</el-col>
          <el-col :span="8">下单人：weiwei</el-col>
          <el-col :span="8">手机号：18655555555</el-col>
        </el-row>
        <el-row :gutter="16" style="margin-top: 8px;">
          <el-col :span="8">收货人：英磊</el-col>
          <el-col :span="8">收货人电话：18655555555</el-col>
          <el-col :span="8">所属商家：A 商家</el-col>
        </el-row>
        <el-row :gutter="16" style="margin-top: 8px;">
          <el-col :span="16">商家地址：北京市市辖区顺义万顺中路 1-1</el-col>
          <el-col :span="8">同城单号：1376113806548768 青霞</el-col>
        </el-row>
      </el-card>
      <!-- 商品明细 -->
      <el-card style="margin-bottom: 18px;">
        <div style="font-weight: bold; margin-bottom: 8px;">商品详情</div>
        <el-table :data="goods" border style="width: 100%;">
          <el-table-column prop="id" label="商品ID" min-width="120" />
          <el-table-column label="商品图片" min-width="100">
            <template #default="{ row }">
              <el-image :src="row.img" style="width: 40px; height: 40px;" fit="cover" />
            </template>
          </el-table-column>
          <el-table-column prop="name" label="商品名称" min-width="120" />
          <el-table-column prop="price" label="销售价" min-width="80" align="center" />
          <el-table-column prop="commission" label="佣金" min-width="80" align="center" />
          <el-table-column prop="num" label="数量" min-width="80" align="center" />
          <el-table-column prop="total" label="总价" min-width="80" align="center" />
          <el-table-column prop="status" label="状态" min-width="80" align="center" />
        </el-table>
        <div style="margin-top: 12px; display: flex; justify-content: space-between;">
          <div>商品总价：80.00</div>
          <div>商品总数：4</div>
          <div>优惠：20(满100-20)</div>
          <div>商品佣金：0.00</div>
          <div>实际支付金额：<span style="color: #e43; font-weight: bold;">40.00</span></div>
          <div>平台佣金总金额：<span style="color: #e43; font-weight: bold;">22.00</span></div>
        </div>
      </el-card>
      <!-- 操作日志 -->
      <el-card>
        <div style="font-weight: bold; margin-bottom: 8px;">操作日志</div>
        <el-table :data="logs" border style="width: 100%;">
          <el-table-column prop="time" label="时间" min-width="160" />
          <el-table-column prop="desc" label="操作类型" min-width="180" />
          <el-table-column prop="remark" label="备注" min-width="180" />
          <el-table-column prop="user" label="操作人" min-width="120" />
        </el-table>
      </el-card>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const goods = ref([
  { id: '20200200003', img: 'https://via.placeholder.com/40', name: '电动牙刷', price: 20, commission: 3, num: 2, total: 30, status: '已收货' },
  { id: '20200200003', img: 'https://via.placeholder.com/40', name: '电动牙刷', price: 20, commission: 3, num: 2, total: 30, status: '已收货' },
  { id: '20200200003', img: 'https://via.placeholder.com/40', name: '电动牙刷', price: 20, commission: 3, num: 2, total: 30, status: '已收货' }
]);
const logs = ref([
  { time: '2022-02-24 14:12:30', desc: '买家付款', remark: '支付成功，买家凭证已生成！', user: '系统' },
  { time: '2022-02-24 14:12:30', desc: '商家发货', remark: '-', user: '张三' },
  { time: '2022-02-24 14:12:30', desc: '买家收货', remark: '-', user: '张三' }
]);
</script>

<style scoped>
.el-card {
  margin-bottom: 18px;
}
</style> 